<template>
	<div class="tl mine-box">
		<div class="tc welcom">
			<label v-if="custom==='false'"> 欢迎{{payStatus.name}}家长</label>
			<label v-else> 欢迎{{info.fullName}}家长</label>
		</div>
		<div class="mine-block">
			<!-- 家长信息 -->
			<div class="stuinfo-box flex">
				<div class="img-size flex">
					<img :src="info.avatar" alt="" class="max">
				</div>
				<div class="info-size parent_info">
					<div>姓名：
						<label v-if="custom==='false'">{{payStatus.name}}</label>
						<label v-else>{{info.fullName}}</label>
					</div>
					<div v-if="custom==='false'">关系：{{payStatus.role}}</div>
					<div v-if="custom==='false'">联系号码：{{payStatus.phone}}</div>
					<div v-if="custom==='false'">
						<div v-if="!payStatus.face">人脸信息：未录入</div>
						<div v-else>
							<div v-if="payStatus.face.startsWith('0')">人脸信息：生成中</div>
							<div v-if="payStatus.face.startsWith('1')">人脸信息：已录入</div>
						</div>
						<div class="payTip" v-if="payStatus.residue<5">缴费状态：
							<template v-if="payStatus.residue>0&&payStatus.status==1">
								已缴费(余{{payStatus.residue}}天到期，
								<router-link to="/product"><span class="red" style="margin: 0;">续费</span></router-link>
								)
							</template>
							<template v-if="payStatus.residue>0&&payStatus.status==0">
								试用中(余{{payStatus.residue}}天到期，
								<router-link to="/product"><span class="red" style="margin: 0;">缴费</span></router-link>
								)
							</template>
							<template v-if="payStatus.residue<=0">
								已过期(
								<router-link to="/product"><span class="red" style="margin: 0;">缴费</span></router-link>
								)
							</template>
						</div>
					</div>
				</div>
			</div>
			<!-- 孩子列表 -->
			<div v-for="item in cList" class="stuinfo-box flex">
				<div class="img-size flex">
					<img :src="item.avatar" alt="" class="max">
					<div class="unbind tc">
						<a class="weui-btn weui-btn_block weui-btn_primary unbind-btn" @click="getUnbind(item)">解除绑定</a>
					</div>
				</div>
				<div class="parent_info info-size flex">
					<span>姓名：{{item.studentName}}</span>
					<span>年龄：{{item.age}}</span>
					<span>学段：{{item.gradeName}}</span>
					<span>班级：{{item.clazzName}}</span>
					<span>主班号码：{{item.classMasterPhone}}</span>
					<span v-if="!item.face">人脸信息：未录入</span>
					<span v-if="item.face.startsWith('0')">人脸信息：生成中</span>
					<span v-if="!item.face.startsWith('0')&&item.face.length>5">人脸信息：已录入</span>
					<span v-if="item.face&&item.face==='-1'">人脸信息：生成失败</span>
				</div>
			</div>
			<div class="stuinfo-box tc addStu" @click="addFn">
				+
			</div>
			<!-- <div class="mine-block menubox" v-if="cList.length!=0">
				<div class="mine-title flex">
					<span style="background: #FFB300;"></span>
					幼儿管理
				</div>
				<div class="menus flex">
					<div class='tc flex' v-for="item in mList" @click="link(item)" v-if="item.name!='缴费'||payStatus.status!=-1">
						<div class="menu_icon" style="background-color: #FFA961;">
							<img :src="item.icon" alt="">
						</div>
						<div>
							{{item.name}}
						</div>
					</div>
					<div class="tc flex" @click="showSelectFace">
						<div class="menu_icon" style="background-color: #FFA961;">
							<img src="@/../static/img/icon/icon15.png" alt="">
						</div>
						<div>
							人脸录入
						</div>
					</div>
					<my-select :option="option" ref="selectFace" @on-change="change"></my-select>
				</div>
			</div> -->
			<div v-if="unbind">
				<div class="weui-mask"></div>
				<div class="weui-dialog">
					<div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
					<div class="weui-dialog__bd tc">
						您确定要解绑 <span style="color: red;padding: 0 1rem;font-weight: bold;">{{unbindForm.name}}</span>吗？
					</div>
					<div class="weui-dialog__ft">
						<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" @click="unbind = false">取消</a>
						<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="unbindFn">解绑</a>
					</div>
				</div>
			</div>
			<div class="weui-mask" v-if="chargeTips">
				<div class="weui-dialog">
					<div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
					<div class="weui-dialog__bd">该功能为付费功能，需缴费后才能使用</div>
					<div class="weui-dialog__ft">
						<div href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary" @click="$router.push('/product')">
							去缴费
						</div>
						<div href="javascript:" class="weui-dialog__btn weui-dialog__btn_default" @click="chargeTips=false">取消</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mySelect from '@/components/select.vue'
	import wx from "weixin-js-sdk";

	export default {
		components: {
			mySelect,
		},
		props: {
			type: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				unbind: false,
				unbindName: '',
				custom: this.$Cookies.get('custom'),
				chargeRouter: ['/reportList', '/camera'],
				chargeTips: false,
				mList: [{
						name: '宝宝考勤',
						link: '/kidsAttendCount',
						icon: require('@/../static/img/icon/icon9.png'),
					},
					{
						name: '宝宝晨检',
						link: '/reportList',
						icon: require('@/../static/img/icon/icon3.png'),
					},
					{
						name: '宝宝请假',
						link: '/askForLeaveList_stu',
						icon: require('@/../static/img/icon/icon13.png'),
					},
					{
						name: '宝宝相册',
						link: '/camera',
						icon: require('@/../static/img/icon/icon26.png')
					},
					{
						name: '书包定位',
						link: '/bind-gps',
						icon: require('@/../static/img/icon/icon10.png')
					},
					{
						name: '校园简介',
						link: '/schoolSituation',
						icon: require('@/../static/img/icon/icon23.png')
					},
					{
						name: '家长缴费',
						link: '/product',
						icon: require('@/../static/img/icon/icon12.png')
					},
					{
						name: '意见反馈',
						link: '/makeAFeedback',
						icon: require('@/../static/img/icon/icon5.png')
					},
					{
						name: '离园申请',
						link: '/askForApplyList',
						icon: require('@/../static/img/icon/icon11.png'),
					},
					{
						name: '宝宝直播',
						link: '/liveStream',
						icon: require('@/../static/img/icon/icon20.png'),
					},
					{
						name: '宝宝食谱',
						link: '/recipe',
						icon: require('@/../static/img/icon/icon22.png'),
					},
				],
				cList: [],
				unbindForm: {
					name: '',
					id: ''
				},
				//人脸录入下拉框设置
				option: {
					value: '人脸录入',
					type: 'picker',
					data: [{
						label: '我',
						value: '-1'
					}],
					style: {
						width: "100%",
						textAlign: "center",
						background: 'none',
						padding: 0,
					}
				},
				payStatus: {
					status: 0,
				},
				info: {
					fullName: this.$Cookies.get("fullName"),
					avatar: this.$Cookies.get('headImage')
				}
			}
		},
		methods: {
			showSelectFace() {
				this.$refs.selectFace.showSelect();
			},
			change(item) { //下拉框选择
				let obj = item[0];
				let loginType = 'student';
				if (obj.label === '我') {
					loginType = 'kinsfolk';
				}
				this.$router.push({
					path: '/photograph',
					query: {
						id: item[0].value,
						loginType: loginType
					}
				})
			},
			getUnbind(data) {
				this.unbind = true;
				this.unbindForm.name = data.studentName;
				this.unbindForm.id = data.studentId;
			},
			unbindFn() {
				let _this = this;
				this.$http.unbindStu({
					studentId: this.unbindForm.id
				}).then(resp => {
					this.$weui.toast('解绑成功');
					this.unbind = false;
					wx.closeWindow();
				})
				//请求数据
			},
			link(items) {
				if (this.chargeRouter.indexOf(items.link) == -1 || this.payStatus.residue > 0) {
					this.$router.push(items.link)
				} else {
					this.chargeTips = true;
				}
			},
			getStuInfo() {
				this.$http.fetchMyStudent().then(resp => {
					this.cList = resp.data.students;
					for (let i = 0; i < this.cList.length; i++) {
						this.option.data.push({
							label: this.cList[i].studentName,
							value: this.cList[i].studentId
						})
					}
				})
			},
			addFn() {
				this.$router.push({
					path: '/addChildren',
					query: {
						openId: this.$Cookies.get('openId'),
						phone: this.payStatus.phone,
						name: this.payStatus.name
					}
				})
			},
			getPayStatus() {
				this.$http.getPayStatus().then(resp => {
					this.payStatus = resp.data;
				})
			}
		},
		mounted() {
			this.getStuInfo();
			if (this.custom === 'false') {
				this.getPayStatus();
			}
		},
		created() {
			this.fullName = this.$Cookies.get('fullName');
		}

	}
</script>

<style scoped>
	.welcom {
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 1rem;
		padding: 0.5rem 0;
		box-sizing: border-box;
	}

	.mine-box {
		width: 100%;
		background: #F5F5F5;
	}

	.mine-block {
		width: calc(100% - 2rem);
		margin: 1.5rem auto;
		border-radius: 5px;
	}

	.menubox {
		width: 100%;
		background: #FFFFFF;
		padding: 1rem;
		box-sizing: border-box;
	}

	.span-width {
		width: 10rem;
	}

	.img-size {
		width: 8rem;
		justify-content: space-around;
		flex-direction: column;
	}

	.img-size img {
		width: 8rem;
		height: 8.4rem;
		margin-bottom: 1rem;
	}

	.info-size {
		line-height: 2rem;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.info-size span {
		display: inline-block;
		min-width: 50%;
		line-height: 3.5rem;
	}

	.stuinfo-box {
		font-size: 1.4rem;
		margin-bottom: 1rem;
		padding: 1rem;
		border-radius: 6px;
		box-sizing: border-box;
		align-items: center;
		background: #ffffff;
	}

	.menu-box {
		width: 100%;
		margin-top: 1rem;
		display: flex;
		flex-wrap: wrap;
	}

	.menu-icon {
		width: 6.6rem;
		margin: 1rem;
	}

	.weui-relieve {
		width: 8rem;
		line-height: 3rem;
		padding: 0;
		font-size: 1.4rem;
		float: left;
	}

	.addStu {
		height: 5rem;
		padding: 0;
		line-height: 5rem;
		font-size: 5rem;
	}

	.unbind {
		width: 80%;
		margin: auto;
	}

	.show {
		width: 10rem;
		height: 10rem;
		overflow: hidden;
		position: relative;
		border-radius: 50%;
		border: 1px solid #d5d5d5;
	}

	.picture {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.unbind-btn {
		font-size: 1.2rem;
		color: #fff;
		background: #FA5151;
		padding: 0.5rem 0;
	}

	.parent_info {
		margin-left: 1rem;
	}

	.parent_info div {
		width: 100%;
		padding: 0.5rem 0;
		white-space: nowrap;
	}

	.parent_info div a {
		display: inline-block;
	}

	.mine-title {
		width: 100%;
		height: 2rem;
		padding: 1rem 0;
		color: #B2B2B2;
		font-size: 1.6rem;
		color: #101010;
	}

	.mine-title span {
		display: inline-block;
		width: 0.4rem;
		height: 2rem;
		margin-right: 1rem;
		border-radius: 10px;
	}

	.menus {
		width: 100%;
		flex-wrap: wrap;
		background: #FFFFFF;
		justify-content: space-between;
	}

	.menus>div {
		width: 25%;
		padding: 0 1rem;
		box-sizing: border-box;
		height: 8rem;
		line-height: 1.4rem;
		flex-direction: column;
		margin-top: 10px;
		font-size: 1.4rem;
	}

	.menus::after {
		content: "";
		flex: auto;
	}

	.menu_icon {
		width: 4rem;
		height: 4rem;
		margin-bottom: 10px;
		border-radius: 50%;
		overflow: hidden;
	}

	.menu_icon img {
		width: 2rem;
		height: 2rem;
		margin-top: 1rem;
	}
</style>
